<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>01 - Color Component</title>
</head>
<body>
<div id="react-container"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    const { Component } = React
    const { render } = ReactDOM

    class AddColorForm extends Component {
      render() {
          return (
              <form onSubmit={e=>e.preventDefault()}>
                  <input type="text"
                         placeholder="color title..." required/>
                  <input type="color" required/>
                  <button>ADD</button>
              </form>
          )
      }
    }

    render(
      <AddColorForm />,
      document.getElementById('react-container')
    )

</script>

</body>
</html>
